<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="box">
      <!-- 图片 -->
      <div class="img_box">
        <!-- 图片列表 -->
        <ul></ul>
        <!-- 左右箭头 -->
        <div class="arrow_left">&lt;</div>
        <div class="arrow_right">&gt;</div>
      </div>

      <!-- 小圆点 -->
      <div class="dot_box">
        <!-- <span class="dotActive dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
        <span class="dot" data-index="3"></span>
        <span class="dot" data-index="4"></span> -->
      </div>
    </div>

    <script src="./packageAjax.js"></script>
    <script src="index.js"></script>

    <!-- <script>
      let box = document.querySelector(".box");
      let imgBoxUl = box.querySelector(".img_box > ul");
      let dot_box = box.querySelector(".dot_box");
      let timer; // 自动轮播定时器
      let newArr = [];
      // 判断本地存储的图片是否为空，不为空执行本地，为空则访问远程链接
      if(localStorage.getItem("img") != null){
        newArr = localStorage.getItem("img").split(",");
        console.log(newArr);
        newArr.forEach(function(item, idx){
        //  渲染图片
        imgBoxUl.innerHTML += `<li><a href=""><img src="${item}" alt=""></a></li>`;
        // 渲染小圆点
        dot_box.innerHTML += `<span class="dot ${idx==0?'dotActive':""}" data-index=${idx+1}></span>`;
    })
    run();
            }else{
                      //   ajax获取图片
        ajax(
          "get",
          "http://studentback.dfbuff.xyz/getMethod",
          function (res) {
            // console.log(res.result.length);
            // 遍历数组
            res.result.forEach(function (item, idx) {
              // 装起图片链接
              newArr.push(item.content);
              // console.log(newArr)
              // 渲染图片
              imgBoxUl.innerHTML += `<li><a><img src=${item.content}></a></li>`;
              // 渲染小圆点
              dot_box.innerHTML += `<span class="dot${
                idx == 0 ? " dotActive" : ""
              }" data-index="${idx + 1}"></span>`;
            });
            // 把装起的链接放本地存储
            localStorage.setItem("img", `${newArr}`);
            // console.log( localStorage.getItem("img"));
            run();
          },
          {
            type: "图片",
          }
        );
            }


      function run() {
        // 插入克隆的第一张图片到最后一张图片之后的位置
        imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
        // 插入克隆的第四张图片到第一张之前的位置
        imgBoxUl.insertBefore(
          imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true),
          imgBoxUl.firstElementChild
        );

        // 动态生成图片(第一张和最后一张)
        // console.log(imgBoxUl.firstElementChild.cloneNode(true));
        // console.log(imgBoxUl.lastElementChild.cloneNode(true));

        // 初始化下标
        let index = 1;
        // 获取上一个操作的index
        let lastIndex = 1;
        // 移动到原来第一张图片的位置
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        setTimeout(function () {
          imgBoxUl.style.transition = "0.2s ease-in-out";
        }, 300);
        let flag = true; // 设置开关, 默认可以打开

        // 事件代理
        box.addEventListener("click", function (event) {
          // 左箭头
          event.target.className == "arrow_left" && arrowLeftFn(event.target);
          // 右箭头
          event.target.className == "arrow_right" && arrowRightFn(event.target);
          // 小圆点
          event.target.classList.contains("dot") && dotFn(event.target);
        });

        // 点击右箭头事件
        function arrowRightFn(target) {
          if (flag) {
            flagFn();
            imgBoxUl.style.transform = `translateX(-${++index}00%)`;
            // 判断是否到达最后一张
            limit(imgBoxUl.children.length - 1, 1);
            // 获取具体span标签
            let rBtnEvent =
              target.parentElement.nextElementSibling.children[index - 1];
            dotColor(rBtnEvent);
          }
        }

        // 点击左箭头事件
        function arrowLeftFn(target) {
          if (flag) {
            flagFn();
            imgBoxUl.style.transform = `translateX(-${--index}00%)`;
            // 判断是否是第一张
            limit(0, imgBoxUl.children.length - 2);
            // 获取具体span标签
            let lBtnEvent =
              target.parentElement.nextElementSibling.children[index - 1];
            dotColor(lBtnEvent);
          }
        }

        // 临界点跳转图片
        function limit(limitIndex, setIndex) {
          // limitIndex 设置限制下标
          // setIndex   设置对于下标
          if (index == limitIndex) {
            index = setIndex;
            imgBoxUl.addEventListener("transitionend", function () {
              // 清除过渡效果, 并且ul恢复位置
              imgBoxUl.style.transition = "none";
              imgBoxUl.style.transform = `translateX(-${index}00%)`;

              // 恢复过渡效果
              // 获取最终样式(被计算的样式)
              window
                .getComputedStyle(imgBoxUl, "style")
                .getPropertyValue("transition-duration");
              imgBoxUl.style.transition = "0.2s ease-in-out";
            });
          }
        }

        // 小圆点点击事件
        function dotFn(target) {
          // 获取自定义属性的值，这个值可以和index对应
          let dataIndex = target.getAttribute("data-index");
          // 操作的值重新赋值到index，那么index就可以更新
          index = dataIndex;
          imgBoxUl.style.transform = `translateX(-${index}00%)`;
          // 调用小圆点颜色函数
          dotColor(target);
        }

        // 封装小圆点颜色变化函数
        function dotColor(tag) {
          // console.log(tag);
          tag.parentElement.children[lastIndex - 1].classList.remove(
            "dotActive"
          );
          tag.classList.add("dotActive");
          // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
          lastIndex = index;
        }

        // // 判断小圆点的长度是否等于图片的长度
        // //   console.log(res.result.length);//获取图片的长度
        // // 小圆点长度大于图片长度就删除最后一个小圆点
        // // console.log(dot_box.lastElementChild);
        // dot_box.children.length > res.result.length && dot_box.lastElementChild.remove();
        // // 小圆点长度小于图片长度就增加一个小圆点
        // if(dot_box.children.length < res.result.length){
        //   let newSpan = document.createElement("span");
        //   newSpan.setAttribute("class",dot);
        //   newSpan.setAttribute("data-index",dot_box.children.length+1);
        //   dot_box.appendChild(newSpan);
        // }

        // 控制开关
        function flagFn() {
          // 关闭开关
          flag = false;
          imgBoxUl.addEventListener("transitionend", function () {
            flag = true;
          });
        }

        // 自动轮播,设置定时器
        timeFn();
        function timeFn() {
          if (timer) {
            clearInterval(timer);
          }
          timer = setInterval(function () {
            arrowRightFn(box.firstElementChild.lastElementChild);
          }, 1000);
        }

        // 鼠标移入box区域，停止定时器
        box.addEventListener("mouseenter", function () {
          clearInterval(timer);
        });
        // 鼠标移出box区域，开始定时器
        box.addEventListener("mouseleave", function () {
          setTimeout(timeFn, 2000);
        });

        // 检测页面是否切换，切换就停止定时器
        window.addEventListener("visibilitychange", function () {
          if (document.hidden) {
            clearInterval(timer);
          } else {
            timeFn();
          }
        });
      }
    </script> -->
  </body>
</html>
